import { Row, Col, Card, Grid } from 'antd';
import Mcard from './mcard';
import Mtable from './mtable';
const { useBreakpoint } = Grid;

export default (props) => {
  const screens = useBreakpoint();

  return (
    <div className="diycard" style={{ ...props.style, border: props.bordered === false ? "none" : "" }}>
      {(screens.xs && !props.onlyTable) ? (
        <div style={{ display: 'flex', flexDirection: 'column', height: '100%' }}>
          {props.children && <div style={{ marginBottom: 12 }}>{props.children}</div>}
          <div>
            <Mcard {...props} />
          </div>
        </div>
      ) : props.withCard === false ? (
        <div style={{ display: 'flex' }}>
          <div style={{ flex: 1 }}>
            {props.childposition == 'top' && props.children}
            <Mtable {...props} />
          </div>
          {(props.childposition == 'right' || !props.childposition) && props.children}
        </div>
      ) : (
        <Card
          bordered={false}
          style={{ height: '100%' }}
          title={<span style={{ color: '#fff' }}>{props.pagetitle || null}</span>}
          extra={props.pageextra || null}
          tabList={props.tabList}
          tabBarExtraContent={props.tabBarExtraContent || null}
          onTabChange={props.onTabChange}
        >
          <div style={{ display: 'flex' }}>
            <div style={{ flex: 1 }}>
              {props.childposition == 'top' && props.children}
              <Mtable {...props} />
            </div>
            {(props.childposition == 'right' || !props.childposition) && props.children}
          </div>
        </Card>
      )}
    </div>
  );
};
